<template>
  <div id="paging">
    <ul class="pc">
      <li class="total">共{{total}}条信息</li>
      <li class="max_perpage">每页{{maxPerpage}}条信息</li>
      <li>当前第&nbsp;{{page}}/{{pageTotal}}&nbsp;页</li>
      <li class="line" @click="toFirstPage">首页</li>
      <li class="line" @click="toPrePage">上一页</li>
      <li class="line" @click="toNextPage">下一页</li>
      <li class="line" @click="toEndPage">末页</li>
      <li>
        跳转至第<input type="text" @keyup.enter="toWhichPage" v-model.number.trim="whichPage" />页
        <span class="line" @click="toWhichPage">&gt;&gt;</span>
      </li>
    </ul>
    <ul class="mb">
      <li>{{page}}/{{pageTotal}}页</li>
      <li class="line m-line" @click="toPrePage">
        <button>上一页</button>
      </li>
      <li class="line m-line" @click="toNextPage">
        <button>下一页</button>
      </li>
      <li>
        到第<input type="text" @keyup.enter="toWhichPage" v-model.number.trim="whichPage" />页
        <span class="line m-ok" @click="toWhichPage">确定</span>
      </li>
    </ul>
  </div>
</template>

<script>
  export default {
    name: "paging",
    props: {
      // 总共多少条
      total: 0,
      // 每页多少条
      maxPerpage: {
        type: Number,
        default: 20
      },
      // 共多少页
      pageTotal: {
        type: Number,
        default: 0
      },
    },
    data() {
      return {
        // 第几页
        page: 1,
        // 跳到第几页
        whichPage: '',
      }
    },
    methods: {
      // 首页
      toFirstPage(page) {
        this.page = 1
        this.$emit('toPageResult', this.page)
      },
      // 上一页
      toPrePage() {
        this.page--
        if (this.page < 1) {
          this.page = 1
          return
        }
        this.$emit('toPageResult', this.page)
      },
      // 下一页
      toNextPage() {
        this.page++
        if (this.page > this.pageTotal) {
          this.page = this.pageTotal
          return
        }
        this.$emit('toPageResult', this.page)
      },
      // 末页
      toEndPage() {
        this.page = this.pageTotal
        this.$emit('toPageResult', this.pageTotal)
      },
      // 跳到第几页
      toWhichPage() {
        if (this.whichPage > this.pageTotal) {
          return
        }
        if (typeof this.whichPage == 'number') {
          this.page = this.whichPage
          this.$emit('toPageResult', this.whichPage)
        } else {
          this.$message.warning('请输入数字')
        }
      }
    },
    mounted() {
      this.pageTotal = this.pageTotal ? this.pageTotal : 0
    },
  }
</script>

<style scoped  rel="stylesheet/scss" lang="less">
  #paging{
    width: 1140px;
    margin: 0 auto;
    position: relative;
    .pc{display: block}
    .mb{display: none}
    margin: 0 auto;
    line-height: 33px;
    ul{
      li{
        list-style: none;
        display: inline-block;
        font-size: 12px;
        color: #6b6b6b;
        font-family: "宋体";
        padding: 0 10px;
        margin-right: 31px;
        input{
          width: 36px;
          height: 15px;
          border: 0;
          margin: 0 10px;
        }
      }
      li:hover{
        cursor: default;
      }
      .line:hover{
        text-decoration: underline;
        /*color: #39D;*/
      }
    }
    ul:after{
      display: block;
      content: '';
      clear: both;
    }
  }
  @media screen and (max-width: 1010px) {
    #paging{
      .pc{display: none}
      .mb{display: block}
      ul{
        li{
          color: #6b6b6b;
          padding: 0 5px;
          font-size: 13px;
          input{
            width: 25px;
            height: 22px;
            border: 1px solid #b7b7b7;
            border-radius: 4px;
            text-align: center;
          }
        }
        .m-line{
          button{
            font-size: 12px;
            border: 1px solid #b7b7b7;
            background: #fff;
            padding: 3px 5px;
            color: #6b6b6b;
          }
        }
        .m-ok{
          padding: 5px;
          border: 1px solid #b7b7b7;
          border-radius: 10px;
        }
      }
    }
  }
</style>
